<template>
  <div class="member-level">
    <Row type='flex' justify="end" class="add">
      <Col v-if="hasPermission('moms:member:levelcreate')"><Button type="primary" @click="skipAdd">新建等级</Button></Col>
      <Col style="margin-left:30px;"  v-if="hasPermission('moms:member:growth')"><Button type="default" @click="showRule">成长规则</Button></Col>
    </Row>
    <Row>
      <Col>
        <Table stripe :columns="columnsList" :data="memberLevelList" class="table-list">
          <template slot-scope="{ row }" slot="memberLevel">
            v{{row.memberLevel}}
          </template>
          <template slot-scope="{ row }" slot="accumulative">
            {{row.integralStart}} ≤ 累计经验值 &lt; {{row.integralEnd}}
          </template>
          <template slot-scope="{ row }" slot="action">
            <i class="iconsys iconedit" title="编辑" @click='skipEdit(row)' v-if="hasPermission('moms:member:levelupdate')"></i>
            <Poptip  confirm title="你确定要删除吗？"   @on-ok="del(row)"  @on-cancel="cancel" style="text-align:left" v-if="row.highest && hasPermission('moms:member:leveldelete')">
              <i class="iconsys icondel" title="删除"></i>
            </Poptip>
          </template>
        </Table>
      </Col>
    </Row>
   <Modal title="成长规则"
             width='800'
             v-model="ruleVisible" class="member-level">
        <Form :model="ruleForm"
              ref="ruleValidate"
              :label-width="0">
          <FormItem label=" ">
            <div ref="addEditor" class="rich-editor"></div>
          </FormItem>
        </Form>
        <div slot="footer"
             class="foot">
          <Button class="btn"
                  @click='handleCancel'>取消</Button>
          <Button type="primary"
                  class="btn"
                  @click="handleSubmit">确认</Button>
        </div>
      </Modal>
  </div>
</template>

<script>
import { getMemberLevelList, delMemberLevel, getGrowthRule, saveGrowthRule } from '@/api/member/index'
import editor from '@/view/components/editor/mixins'
export default {
  name: 'member_level_list',
  mixins: [editor],
  data () {
    return {
      ruleVisible: false,
      ruleForm: {
        growRuleId: ''
      },
      columnsList: [
        {
          title: ' ',
          width: 100
        },
        {
          title: '等级编号',
          slot: 'memberLevel'
        },
        {
          title: '等级玩家',
          key: 'memberLevelName'
        },
        {
          title: '累计经验值区间',
          slot: 'accumulative'
        }
      ],
      memberLevelList: []
    }
  },
  watch: {
    ruleVisible (val) {
      if (!val) {
        this.$refs.ruleValidate.resetFields()
      }
    }
  },
  methods: {
    showRule () {
      this.ruleVisible = true
      getGrowthRule({
        merchantId: this.$store.state.user.merchantId
      }).then(res => {
        if (res.data.status === 200) {
          if (res.data.data.length > 0) {
            this.ruleForm = {
              growRuleId: res.data.data[0].growRuleId
              // ruleContent: res.data.data[0].ruleContent
            }
            this.$editorContent = res.data.data[0].ruleContent || ''
            this.$editor.txt.html(res.data.data[0].ruleContent || '')
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    getList () {
      getMemberLevelList({
        merchantId: this.$store.state.user.merchantId
      }).then(res => {
        if (res.data.status === 200) {
          this.memberLevelList = res.data.data
          this.memberLevelList[this.memberLevelList.length - 1].highest = true
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    handleCancel () {
      this.ruleVisible = false
    },
    handleSubmit () {
      if (this.$editor.txt.html() === '<p><br></p>') {
        this.$Message.error('请输入成长规则')
        return
      }
      if (this.$editor.txt.html().length > 2000) {
        this.$Message.error('成长规则不能超过2000个字符')
        return
      }
      let param = {}
      if (this.ruleForm.growRuleId) {
        param = {
          operatorId: this.$store.state.user.userId,
          operatorName: this.$store.state.user.userName
        }
      } else {
        param = {
          creatorId: this.$store.state.user.userId,
          creatorName: this.$store.state.user.userName
        }
      }
      saveGrowthRule({
        ...param,
        merchantId: this.$store.state.user.merchantId,
        growRuleId: this.ruleForm.growRuleId,
        ruleContent: this.$editor.txt.html()
      }).then(res => {
        if (res.data.status === 200) {
          this.$Message.success('编辑成长规则成功')
          this.ruleVisible = false
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    skipAdd () {
      this.$router.push({ name: 'member_level_add' })
    },
    skipEdit (row) {
      this.$router.push({ name: 'member_level_edit',
        params: {
          id: row.memberLevel
        }
      })
    },
    del (row) {
      delMemberLevel({
        merchantId: this.$store.state.user.merchantId,
        memberLevelId: row.memberLevelId
      }).then(res => {
        if (res.data.status === 200) {
          this.$Message.success('删除成功')
          this.getList()
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    cancel () {}
  },
  created () {
    this.getList()
    if (this.hasPermission(['moms:member:levelupdate', 'moms:member:leveldelete'])) {
      this.columnsList.push({
        title: '操作',
        width: 150,
        slot: 'action',
        align: 'left'
      })
    }
  },
  mounted () {
    this.createEditor(this.$refs.addEditor)
  }
}
</script>

<style lang='less'>
  .member-level{
    .ivu-form .ivu-form-item-label{
      display: none !important;
    }
    .ivu-form-item{
      margin-bottom: 0;
    }
    .ivu-modal-header{
      border-bottom: none;
    }
    .ivu-modal-footer{
      border-top: none;
    }
    .add{
      padding: 24px 15px;
      .ivu-btn-primary {
        width: 80px;
      }
    }
  }
</style>
